<template>
  <div class="box-card">
    <el-container>
      <el-header height="57px" class="pass-header">
        <div class="my-el-tabs">
          <el-tabs v-model="activePane">
            <el-tab-pane label="总览" name="overview"/>
            <el-tab-pane label="进攻" name="attack"/>
            <el-tab-pane label="防守" name="defense"/>
          </el-tabs>
        </div>
      </el-header>
      <el-main class="pass-main">
        <div class="battle-teams">
          <div class="team-box">
            <span>{{battleTeam.homeName}}</span>
            <img class="team-logo" :src="battleTeam.homeTeamImg" alt="">
          </div>
          <div class="team-box">
            <img class="team-logo" :src="battleTeam.awayTeamImg" alt="">
            <span>{{battleTeam.awayName}}</span>
          </div>
        </div>
        <div class="butter-fly-box">
          <AllButterFly
                  v-if="activePane==='overview'"
                  :behavior0="comparisonData[0].behavior0"
                  :behavior1="comparisonData[0].behavior1"
                  :size="45"/>
          <AttackButterFly
                  v-if="activePane==='attack'"
                  :behavior0="comparisonData[1].behavior0"
                  :behavior1="comparisonData[1].behavior1"
                  :size="45"/>
          <DefenseButterFly
                  v-if="activePane==='defense'"
                  :behavior0="comparisonData[2].behavior0"
                  :behavior1="comparisonData[2].behavior1"
                  :size="45"/>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  import axios from 'axios'
  import AllButterFly from "./threeButterFly/AllButterFly";
  import AttackButterFly from "./threeButterFly/AttackButterFly";
  import DefenseButterFly from "./threeButterFly/DefenseButterFly";
  export default {
    name: "DataComparison",
    props:{
      comparisonData:{
        type:Array,
        default(){
          return []
        }
      },
    },
    watch:{
    },
    components:{
      AllButterFly,
      AttackButterFly,
      DefenseButterFly
    },
    data(){
      return {
        activePane:'overview',
      }
    },
    methods:{

    },
    computed:{
      battleTeam(){
        return this.$store.state.battleTeam
      }
    },
    created() {

    }
  }
</script>

<style scoped>
  .box-card {
    margin: auto;
    width:  1440px;
    height: 553px;
  }
  .pass-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #194568;
    padding: 0;
  }
  .pass-main {
    width: 100%;
    height: 496px;
    padding: 0;
    background-color: #F1F6F9;
  }
  .battle-teams {
    width: 50%;
    height: 20%;
    /*background-color: red;*/
    margin:auto;
    display: flex;
    justify-content: space-between;
  }
  .team-box {
    width: 45%;
    height: 100%;
    /*background-color: blue;*/
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .butter-fly-box {
    width: 100%;
    height: 80%;
  }
  span {
    font-size: 40px;
    font-weight: bold;
  }
  .team-logo {
    width: 80px;
    height: 80px;
  }
  .my-el-tabs {
    margin-top: 15px;
    margin-right: 25px;
  }
  .my-el-tabs /deep/ .el-tabs__item {
    color: white;
    font-size: 20px;
    font-weight: bold;
  }
  .my-el-tabs /deep/ .el-tabs__nav-wrap::after {
    height: 0;
  }
  .my-el-tabs /deep/ .el-tabs__active-bar {
    height: 3px;
    background-color: #16C79A;
  }
  .my-el-tabs /deep/ .el-tabs__item:hover {
    color: #16C79A;
  }
  .my-el-tabs /deep/ .el-tabs__item.is-active {
    color: #16C79A;
  }
</style>